<template>
  <view class="header-search">
    <!-- 头部搜索框 -->
    <u-search
      placeholder="输入商品名"
      v-model="keyword"
      :action-style="{
        backgroundColor: '#eb4450',
        width: '101rpx',
        height: '61rpx',
        color: '#fff',
        'line-height': '61rpx',
        'border-radius': '8rpx',
      }"
      @custom="handleInputValue"
    ></u-search>

    <!-- 商品列表 -->
    <scroll-view
      class="goods_list"
      :scroll-top="scrollTop"
      @scroll="scrollEvent"
      :scroll-y="true"
      :show-scrollbar="true"
    >
      <navigator
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
      >
        <!-- 商品图片 -->
        <view class="goods_image">
          <u-image
            :src="
              item.goods_small_logo ||
              'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'
            "
            height="191"
          ></u-image>
        </view>
        <!-- 商品信息 -->
        <view class="goods_info">
          <!-- 商品标题 -->
          <view class="goods_info_title">{{ item.goods_name }}</view>
          <!-- 商品价格 -->
          <view class="goods_info_price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </scroll-view>
    <view
      class="back_top"
      v-if="old.scrollTop > 800 ? true : false"
      @click="backTop"
    >
      <u-icon name="arrow-up" size="70rpx" color="#fff"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      goodsList: [],
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
    };
  },
  methods: {
    // 点击搜索按钮触发搜索事件
    handleInputValue() {
      this.goodsSearch(this.keyword);
    },
    // /goods/search
    async goodsSearch(query) {
      //   const res = await this.$u.get(`/goods/qsearch`, { query });
      //   console.log(res);
      const res = await this.$u.get(`/goods/search`, { query });
      console.log(res);
      this.goodsList = res.message.goods;
    },
    // // 监听页面滚动
    // onPageScroll(e) {
    //   this.scrollTop = e.scrollTop;
    // },
    // 返回顶部
    backTop() {
      //  调用返回顶部的api
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
    scrollEvent(e) {
      //   console.log(e);
      //   console.log(e.detail.scrollTop);
      // 节流
      this.$u.throttle(() => {
        this.old.scrollTop = e.detail.scrollTop;
        // console.log(111);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
.header-search {
  padding: 18rpx;
  .goods_list {
    height: 100vh;
    navigator {
      display: flex;
      padding: 15rpx;
      border-bottom: 1px solid #eee;
      .goods_image {
        flex: 1;
      }
      .goods_info {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 3;
        .goods_info_title {
        }
        .goods_info_price {
          color: #eb4450;
          &:before {
            content: "￥";
            font-size: 16rpx;
          }
        }
      }
    }
  }
  .back_top {
    position: fixed;
    right: 30rpx;
    bottom: 100rpx;
    background-color: #eee;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>